<html xmlns:th="http://www.thymeleaf.org" >
<head >
	<script src="/plugins/modernizr/js/modernizr.js"></script>
	<script src="/js/jquery.mmenu.min.js"></script>
	<!-- Vendor CSS-->
	<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
	<link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

	<!-- Plugins CSS-->
	<link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
	<link href="/plugins/scrollbar/css/mCustomScrollbar.css" rel="stylesheet" />
	<link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
	<link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
	<link href="/plugins/xcharts/css/xcharts.min.css" rel="stylesheet" />
	<link href="/plugins/morris/css/morris.css" rel="stylesheet" />

	<!-- Theme CSS -->
	<link href="/css/jquery.mmenu.css" rel="stylesheet" />

	<!-- Page CSS -->
	<link href="/css/style.css" rel="stylesheet" />
	<link href="/css/add-ons.min.css" rel="stylesheet" />

</head>
<body>

	<div class="col-lg-4 col-md-5 col-sm-5" id="mypersonal-data"  th:fragment="mypersonal" style="margin-left: 34%;display: none;" >
		<div class="panel"th:fragment="mypersonal-b">
			<!------------------------------------->
			<div class="modal fade" id="updateuser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" >
								修改用户名和邮箱
							</h4>
						</div>
						<div class="modal-body">
							<p>用户名：<input type="text" id="userName1" th:value="${userName}"/></p>
							<p>邮&nbsp&nbsp&nbsp&nbsp箱：<input type="text" id="email1" th:value="${email}"/></p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-default"  data-dismiss="modal" onclick="updateuser()">
								确定
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!--------------------------------->

			<div class="modal fade" id="updatepassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel111" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" >
								修改密码
							</h4>
						</div>
						<div class="modal-body">
							<p>密&nbsp&nbsp&nbsp&nbsp&nbsp码：<input type="text" id="userpassword2"/></p>
							<p>确认密码：<input type="text" id="userpassword1" /></p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-default"  data-dismiss="modal" onclick="updatepassword()">
								确定
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

			<!---------------------------------->
			<div class="panel-body">
				<div class="text-left bk-bg-white bk-padding-top-40 bk-padding-bottom-10">
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bk-vcenter text-center">
							<div class="bk-avatar">
								<img src="a/img/avatar.jpg" alt="" class="img-circle bk-img-120 bk-border-light-gray bk-border-3x">
							</div>
							<h4 class="bk-margin-top-10 bk-docs-font-weight-300" th:text="${userName}"></h4>
							<button class="btn"   data-toggle="modal" data-target="#updateuser" style="background: #fff;color: #000;" >更改资料</button>
						</div>
						<!--<hr class="bk-margin-off">-->

						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left bk-vcenter text-center" >
							<!--<hr class="bk-margin-off">-->
						</div>
					</div>
				</div>

				<hr class="bk-margin-off">
				<div class="bk-ltr bk-bg-white">
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="bk-bg-white text-center bk-padding-top-20 bk-padding-bottom-10">
								<div class="row">
									<div class="text-left bk-padding-left-10">
										<h4 class="bk-margin-off">个人资料</h4>
									</div>
								</div>
							</div>
							<div class="bk-bg-white bk-bg-lighten bk-padding-top-10 bk-padding-left-20">
								<div class="pull-left bk-margin-right-10">
									<div class="bk-round bk-bg-darken bk-border-off">
										<!--<i class="glyphicon glyphicon-wrench"></i>-->
									</div>
								</div>
								<p class="text-left">
									<button class="btn"   data-toggle="modal" data-target="#updatepassword" style="background: #fff;color: #000;" >修改密码</button>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="bk-ltr bk-padding-bottom-20 bk-padding-left-20">
					<div class="row">
						<div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
							<i class="	glyphicon glyphicon-user"></i> 粉丝 4
						</div>
						<div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
							<i class="	glyphicon glyphicon-user"></i> 他的关注 4
						</div>
						<div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
							<i class="fa fa-envelope" th:text="${email}"></i>
						</div>
						<div class="col-12-4 col-md-12 col-sm-12 col-xs-12 bk-bg-white bk-padding-top-10">
							<a th:href="'/getCollectByUserId?userId='+${id}" style="color: #5e5e5e; text-decoration: none;"><i class="glyphicon glyphicon-folder-close"></i> 我的收藏</a>
						</div>
					</div>
				</div>
			</div>
		</div>


	<script>
		function  mypersonal() {
			$("#content3").hide();//显示输入框
			$("#collectContent").hide();//隐藏收藏内容
			$("#collectButton").hide()//隐藏收藏按钮
			$("#collect-cont").hide();
			$("#noRead").hide();//影藏未读列表
			$("#personal-data").hide();
			$("#mypersonal-data").show();
			$("#allpersonal-data").hide();
			$("#follow-personal-data").hide();
			$("#personal-search").hide();
			$("#mypersonal-data").load("/getMyPersonal?id="+localStorage.getItem("id"));


		}

		function updateuser() {
			$.ajax({
				type:"POST",
				dataType:"JSON",
				contentType: "application/json;charset=UTF-8",
				url:"/updateuser",
				data:JSON.stringify({
					id:localStorage.getItem("id"),
					userName:$("#userName1").val(),
					email:$("#email1").val()
				}),
				beforeSend: function (XMLHttpRequest) {
					XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
				},
				success:
						function (Response) {
							if(Response.code==0){
								alert(Response.msg);
								//console.log(Response);
							}
							else
								alert(Response.msg);
							//console.log(Response);
						},
				error:
						function (Response) {
							alert(Response.msg);
						}
			})
		}



		function updatepassword() {
			$.ajax({
				type:"POST",
				dataType:"JSON",
				contentType: "application/json;charset=UTF-8",
				url:"/updatepassword",
				data:JSON.stringify({
					id:localStorage.getItem("id"),
					passWord:$("#userpassword1").val(),
					email:$("#userpassword2").val()
				}),
				beforeSend: function (XMLHttpRequest) {
					XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
				},
				success:
						function (Response) {
							if(Response.code==0){
								alert(Response.msg);
								//console.log(Response);
							}
							else
								alert(Response.msg);
							//console.log(Response);
						},
				error:
						function (Response) {
							alert(Response.msg);
						}
			})
		}
	</script>
</div>




<!-- Vendor JS-->
<script src="/vendor/js/jquery.min.js"></script>
<script src="/vendor/js/jquery-2.1.1.min.js"></script>
<script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/skycons/js/skycons.js"></script>

<!-- Plugins JS-->
<script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
<script src="/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/plugins/bootkit/js/bootkit.js"></script>
<script src="/plugins/moment/js/moment.min.js"></script>
<script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
<script src="/plugins/touchpunch/js/jquery.ui.touch-punch.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.pie.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.resize.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.stack.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.time.min.js"></script>
<script src="/plugins/xcharts/js/xcharts.min.js"></script>
<script src="/plugins/autosize/jquery.autosize.min.js"></script>
<script src="/plugins/placeholder/js/jquery.placeholder.min.js"></script>
<script src="/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script src="/plugins/raphael/js/raphael.min.js"></script>
<script src="/plugins/morris/js/morris.min.js"></script>
<script src="/plugins/gauge/js/gauge.min.js"></script>
<script src="/plugins/d3/js/d3.min.js"></script>


<!--<script src="/plugins/raphael/js/raphael.min.js"></script>
<script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
<script src="/plugins/moment/js/moment.min.js"></script>-->

<!-- Theme JS -->

<script src="/js/core.min.js"></script>

<!-- Pages JS -->
<script src="/js/pages/index.js"></script>
<script src="/js/pages/ui-elements.js"></script>
</body>
</html>
